<template>
    <div class="timeLine">
        <div class="timeLines" v-for="(item, index) in dataList" :key="index">
            <div class="timeLine-item">
                <div class="item-user">
                    <div class="item-tail"></div>
                    <div class="item-user-avatar">
                        <el-avatar> user </el-avatar>
                        <el-icon class="item-icon" :class = "item.status?'success':'error'">
                            <component :is="item.iconName" />
                        </el-icon>
                    </div>
                    <div class="item-user-desc">
                        <div>{{ item.type }}</div>
                        <div>{{ item.content }}</div>
                    </div>
                </div>
                <div class="time">
                    {{ item.timestamp }}
                </div>
            </div>
        </div>
        <div class="timeLine-item">
            <div class="item-user">
                <div class="item-user-acatar">
                    <el-avatar> ... </el-avatar>
                </div>
                <div class="item-user-desc" style="font-size: 16px; line-height: 34px;">审批进行中</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref,reactive,watch, onMounted} from 'vue'
import { SuccessFilled } from '@element-plus/icons-vue'
const dataList = ref()
const props = defineProps({
    modelValue: { type: Array, default: () => [] },
})
const flag = watch(() => props.modelValue, (newValue) => {
    dataList.value = JSON.parse(JSON.stringify(newValue))
    if (newValue) {
        flag()
    }
}, {
    deep: true
})
onMounted(()=>{
    dataList.value = JSON.parse(JSON.stringify(props.modelValue))
})
</script>

<style scoped lang="less">
.timeLine {
    background: white;
    padding: 20px 10px 50px;
}

.timeLines {
    position: relative;
}

.timeLine-item {
    z-index: 1;
    margin-bottom: 30px;
    position: relative;
}


.item-user {}

.item-tail {
    position: absolute;
    left: 18px;
    top: 40px;
    height: 100%;
    border-left: 2px solid var(--el-timeline-node-color);
    width: 4px;
    color: #e4e4e4;
    background: #e4e4e4;
}

.item-user-avatar {
    background: white;
    position: relative;
    padding: 4px 0;
}

.avatar {
    display: flex;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    background: white;
    position: relative;
}

.item-icon {
    border-radius: 50%;
    font-size: 15px;
    border: 2px solid white;
    padding: 0;
    right: 4px;
    top: 15px;
}
.success{
    color: #35b881!important;
}
.error{
    color: #f56c6c!important;
}
.item-user-desc {
    position: absolute;
    left: 60px;
    top: 5px;
    font-size: 14px;
}

.timeLine-item .item-user-desc div:nth-child(1) {
    color: #8c8c8c
}

.timeLine-item .item-user-desc div:nth-child(2) {
    font-size: 15px;
    color: #000
}

.time {
    font-size: 15px;
    color: #8a8a8a;
    position: absolute;
    right: 0;
    top: 0;
}
</style>